<template>
  <div class="container">
    <!--查询条件-->
    <div class="search-box" ref="queryForm" @keyup.enter="getTableList">
      <el-form :inline="true" :model="search" class="demo-form-inline">
        <el-form-item label="项目名称">
          <el-input v-model="search.projectName" size="small" clearable placeholder="请输入项目名称"></el-input>
        </el-form-item>
        <el-form-item label="合同名称">
          <el-input v-model="search.contractTitle" size="small" clearable placeholder="请输入合同名称"></el-input>
        </el-form-item>
        <el-form-item label="支付状态 ">
          <el-select v-model="search.hasPay" size="small" placeholder="请选择状态">
            <el-option label="未支付" :value="0"></el-option>
            <el-option label="已支付" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="getTableList">查询</el-button>
          <el-button type="default" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--查询条件-->

    <!--操作-->
    <div class="operate-box" style="margin: 15px 0;" ref="add">
      <el-button type="primary" size="small" plain icon="el-icon-plus"  @click="handleAdd" v-hasPermi="['paymentManage:apply:add']">新增</el-button>
      <!-- <el-button type="danger" size="small" plain icon="el-icon-minus" @click="handleDelete(1,'')" v-hasPermi="['paymentManage:apply:delete']">删除</el-button> -->
    </div>
    <!--操作-->

    <el-table ref="elTable" :data="list" border size="mini" stripe :height="listHeight || fillHeight('listHeight',['queryForm','add','pagination'],['hamburger-container','tags-view-container'], 100)" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="50"></el-table-column> -->
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="pigfarmNumber" label="猪场编码" show-overflow-tooltip></el-table-column>
      <el-table-column prop="contractTitle" label="合同名称" show-overflow-tooltip></el-table-column>
      <el-table-column prop="contractMoney" label="合同金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="thisMoney" label="申请金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="actualMoney" label="实际已支付金额" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="审批状态" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{scope.row.status | handleStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="hasPay" label="支付状态">
        <template slot-scope="scope">
          <span>{{scope.row.hasPay===0?'未支付':'已支付'}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createName" label="提交人" show-overflow-tooltip></el-table-column>
      <el-table-column prop="createTime" label="付款申请时间" show-overflow-tooltip></el-table-column>
      <el-table-column prop="bpmCompleteTime" label="付款申请完成时间" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click.native.prevent="handleEdit(scope.row.id, 'edit')" type="text" size="small" v-hasPermi="['paymentManage:apply:edit']">编辑</el-button>
          <el-button @click.native.prevent="handleEdit(scope.row.id, 'view')" type="text" size="small">查看</el-button>
          <el-button @click.native.prevent="checkApprove(scope.row)" type="text" size="small" v-if="scope.row.status==='active' || scope.row.status==='completed'">审批详情</el-button>
          <el-button @click.native.prevent="handleDelete(2,scope.row)" type="text" size="small" v-hasPermi="['paymentManage:apply:delete']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表格-->

    <!--分页-->
    <div class="page-box" ref="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10,30,50]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <!--分页-->

  </div>
</template>

<script>
  import { getTableListApi, deleteApi } from "@/api/paymentManger/payApply";
  import { restObject } from '../../../utils/index'
  import BaseIndex from "@/views/base/BaseIndex";
  import {newWindowBpm} from "@/utils/openBpm";
  import Index from "./index";
  export default {
    name: "PayApply",
    extends: BaseIndex,
    data() {
      return {
        search: {projectName: '', contractTitle: '', hasPay:''},//查询条件
        listHeight:0,//表格高度
        list: [],//表格数据
        selectedList: [],//选中项
        page:{ pageNum:1, pageSize:10 },//分页
        total:0,//总记录数
      }
    },

    filters:{
      handleStatus(val){
        const actions = {
          'active': '审批中',
          'completed': '审批完成',
          'cancel': '作废',
          'reject': '退回',
          'default': '暂存',
        }
        return actions[val] || actions['default']
      }
    },

    created(){
      this.getTableList();
    },

    methods:{

      /**
       * 获取表格数据
       */
      getTableList(){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        getTableListApi(this.search,this.page).then(res => {
          console.log('付款申请列表:',res);
          loading.close();
          if(res.code === 0){
            const { records, total } = res.data;
            this.list = records;
            this.total = total;
          }else{
            this.$message.warning(res.msg)
          }
        }).catch(error => {
          console.log('error:',error);
          loading.close();
        })
      },


      /**
       *重置
       */
      handleReset(){
        // debugger
        restObject(this.search);
        this.getTableList();
      },

      /**
       *新增
       */
      handleAdd(){
        this.$router.push({
          path:'/payApply/detail',
          query:{
            type:'add',
          }
        })
      },

      /**
       *编辑&&查看
       * @param id
       * @param type
       */
      handleEdit(id,type){
        this.$router.push({
          path:'/payApply/detail',
          query:{
            type,id
          }
        })
      },

      /**
       * 审批查询
       */
      checkApprove(data){
        newWindowBpm(data.instId,true,{path:`/settleCompile/index`},true, Index);
      },

      /**
       * 删除
       */
      deleteItem(ids){
        const loading = this.$loading({lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)'});
        deleteApi(ids).then(res => {
          console.log('删除:',res);
          loading.close();
          if(res.code === 0){
            this.$message.success('删除成功');
            this.getTableList();
          }else{
            this.$message.warning(res.msg);
          }
        }).catch(error => {
          loading.close();
          console.log('error:',error);
        })
      },

      /**
       *删除点击事件
       */
      handleDelete(type,data){
        // debugger
        let ids = [];
        let canDelete = true;
        if(type===1){//批量删除
          if(!this.selectedList.length){
            this.$message.warning("请选中要删除的项!");
            canDelete = false;
          }else{
            for(let i=0;i<this.selectedList.length;i++){
              const { id, status } = this.selectedList[i];
              //审核中和审核通过的结算单不能删除
              if(status==="active" || status==="completed"){
                this.$message.warning("审核中或审核通过状态的付款单无法删除!");
                canDelete = false;
                break;
              }else{
                ids.push(id);
              }
            }
          }
        }else{//单删
          const { status, id } = data;
          //审核中和审核通过的结算单不能删除
          if(status==="active" || status==="completed"){
            this.$message.warning("审核中或审核通过状态的结算单无法删除!");
            canDelete = false;
          }else{
            ids = [id];
          }
        }
        if(canDelete){
          this.$confirm('确定要删除吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.deleteItem(ids);
          })
        }
      },

      /**
       *复选框事件
       * @param val
       */
      handleSelectionChange(val) {
        this.selectedList = val;
      },

      /**
       *pageSize切换事件
       * @param val
       */
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.page.pageSize = val;
        this.getTableList();
      },

      /**
       *分页切换
       * @param val
       */
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page.pageNum = val;
        this.getTableList();
      }
    }
  }
</script>

<style scoped lang="scss">
  .container{
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    .page-box{
      width: 100%;
      height: 60px;
      // display: flex;
      // justify-content: center;
      align-items: center;
      text-align: right;
      margin: 20px 0 0;
    }
  }
</style>
